<template>
	<div :class="curClassName" :style="curStyle">
		<template v-if="containerModel.length > 0">
			<div
				v-for="name of containerModel"
				class="container-item__pos"
				:style="getItemPosStyle(name)"
			>
				<slot :name="name"></slot>
			</div>
		</template>
	</div>
</template>
<script setup lang="ts">
import { Ref } from 'vue';
import { simpleFlexContainerProps } from './simpleflex-container';

const props = defineProps(simpleFlexContainerProps);

/**
 * 插槽对象
 *
 * @memberof AppSimpleFlexContainer
 */
const containerModel = computed(() => {
	let containerModel: any[] = [];
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	if (
		curLayoutModel &&
		curLayoutModel.details &&
		curLayoutModel.details.length > 0
	) {
		curLayoutModel.details.forEach((key: string) => {
			containerModel.push(key);
		});
	}
	return containerModel;
});

/**
 * 项名称
 *
 * @memberof AppSimpleFlexContainer
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式类
 *
 * @memberof AppSimpleFlexContainer
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-simpleflex-container ${itemName.value} ${
			layoutModel.sysCss || ''
		}`;
	}
});

/**
 * 当前容器样式
 *
 * @memberof AppSimpleFlexContainer
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 *  获取项布局样式
 */
const getItemPosStyle = (name: string) => {
	let layoutModel: any;
	if (props.index || props.index === 0) {
		layoutModel = props.layoutModelDetails[`${name}_${props.index}`];
	} else {
		layoutModel = props.layoutModelDetails[name];
	}
	if (layoutModel) {
		return layoutModel.getBoxLayOutStyle();
	}
};
</script>
